<template>
  <div>
    <div class="audience_details" v-if="hasRoot">
      <template v-if="!loading">
        <div class="ad_overview">
          <h3 class="title_h3">
            <span>观众概览</span>
          </h3>
          <ul
            class="ado_list"
            v-if="dataALL && (dataALL.maxGender || dataALL.maxAge || dataALL.maxCity)"
          >
            <li v-if="dataALL.maxGender">
              <i :class="dataALL.maxGender.name == '男性' ? 'man' : 'woman'"></i>
              <p
                v-if="dataALL.maxGender"
              >{{ dataALL.maxGender.name }}居多，占比{{ dataALL.maxGender.value }}%</p>
            </li>
            <li v-if="dataALL.maxAge">
              <i class="age"></i>
              <p>{{ dataALL.maxAge.name }}居多，占{{ dataALL.maxAge.value }}%</p>
            </li>
            <li v-if="dataALL.maxCity">
              <i class="site"></i>
              <p>{{ dataALL.maxCity.name }}居多，占{{ dataALL.maxCity.value }}%</p>
            </li>
          </ul>
          <noData v-else>暂无数据</noData>
        </div>
        <div class="ad_portrayal">
          <h3 class="title_h3 ageTitle">
            <span>观众性别分布</span>
          </h3>
          <div class="genderSpread_box" v-if="genderRate.length">
            <GenderSpread :pieData="genderRate" />
          </div>
          <noData v-else>暂无数据</noData>
          <h3 class="title_h3 ageTitle">
            <span>观众年龄分布</span>
          </h3>
          <div class="adp_chart" v-if="ageData.length">
            <BarChart :pieData="ageData" pieName="观众年龄分布" />
          </div>
          <noData v-else>暂无数据</noData>
        </div>
        <div class="ad_territory">
          <h3 class="title_h3">
            <span>观众地域分布</span>
          </h3>
          <div class="adt_chart" ref="chart2" v-if="provinceRate.length">
            <SideBarChart :pieData="provinceRate" pieName="观众地域分布" />
          </div>
          <noData v-else>暂无数据</noData>
        </div>
      </template>
      <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
    </div>
    <noPower :minLeve="$store.state.userRoot[8][104].ownerMinLevel" v-else />
  </div>
</template>

<script>
import GenderSpread from '@/component/GenderSpread.vue';
import BarChart from '@/component/BarChart.vue';
import SideBarChart from '@/component/SideBarChart.vue';
export default {
  props: {},
  data() {
    return {
      id: this.$route.query.id,
      listLoading: false,
      percentage: null,
      percentage1: null,
      fansDiYu: [],
      sex: [],
      genderRate: [], //  // 粉丝性别
      // 粉丝年龄
      ageData: [],
      // 地域分布
      provinceRate: [],
      sex: false,
      dataALL: '',
      loading: true,
      hasRoot: true
    };
  },
  mounted() {
    this.getDatas();
  },
  components: {
    GenderSpread,
    BarChart,
    SideBarChart
  },
  methods: {
    getDatas() {
      let that = this;
      that.$axios
        .get('/api/Product/GetProAudience', {
          params: {
            ProId: this.id
          }
        })
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            this.dataALL = res.data.data;
            that.genderRate = res.data.data.genderRate;
            that.ageData = res.data.data.ageRate;
            that.provinceRate = res.data.data.provinceRate;
          } else if (res.data.code == 1003) {
            this.hasRoot = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import './../../../common/common.styl';

.audience_details {
  padding: rem(20) rem(30) rem(30);
}

.ado_list {
  overflow: hidden;

  li {
    display: flex;
    align-items: center;
    margin: 0 0 rem(24);
    font-size: 0;

    i {
      display: inline-block;
      margin-right: rem(20);

      &.woman {
        width: rem(30);
        height: rem(32);
        bgp('./../../../assets/img/woman.png');
      }

      &.man {
        width: rem(32);
        height: rem(32);
        bgp('./../../../assets/img/man.png');
      }

      &.age {
        width: rem(30);
        height: rem(32);
        bgp('./../../../assets/img/age.png');
      }

      &.site {
        width: rem(26);
        height: rem(32);
        bgp('./../../../assets/img/site.png');
      }
    }

    p {
      font-size: rem(26);
      color: #555;
    }
  }
}

.ad_portrayal {
  margin-top: rem(20);

  .genderSpread_box {
    margin-top: rem(30);
  }

  .adp_chart {
    height: rem(400);
  }
}

.ad_territory {
  margin-top: rem(20);

  .adt_chart {
    margin-top: rem(40);
    height: rem(400);
  }
}
.title_h3{
  margin: rem(30) 0 rem(30)
}
.loading {
  margin: rem(120) 0;
}
</style>
